<template>
  <div v-if="data !== false" class="union">
    <div class="line">您还可以使用以下方式登录</div>
    <ul class="union-item">
      <li v-for="(name,index) in data" :key="index">
        <!--动态输出组件 -->
        <components :is="name" />
      </li>
    </ul>
  </div>
</template>
<script>
import QQ from "./QQ";
import Wechat from "./Wechat";
import Today from "./Today";
export default {
  components: {
    QQ,
    Wechat,
    Today
  },
  name: "Union",
  props: {
    data: [Boolean, Array]
  }
};
</script>
<style lang="stylus" scoped>
.union {
  margin-top: 28px
  .line {
    color: #65798E
    font-size: 12px
    vertical-align: middle
  }
  .line:before {
    content: ''
    display: inline-block
    height: 1px
    background: #C3C3C3
    width: 86px
    vertical-align: middle
    margin-right: 12px
  }
  .line:after {
    content: ''
    display: inline-block
    height: 1px
    background: #c3c3c3
    width: 86px
    vertical-align: middle
    margin-left: 12px
  }
  .union-item {
    padding: 0
    margin-top: 24px
    display: flex
    align-content: center
    justify-content: space-around
  }
}
</style>